<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习中心 - 知识付费会员App</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../css/styles.css">
    <script>
        // 检测页面是否在iframe中打开
        window.onload = function() {
            if (window.self !== window.top) {
                // 页面在iframe中，移除iPhone容器样式
                var container = document.querySelector('.iphone-container');
                if (container) {
                    container.style.borderRadius = '0';
                    container.style.boxShadow = 'none';
                    container.style.border = 'none';
                }
            }
        };
    </script>
</head>
<body>
    <div class="iphone-container">
        <!-- 顶部状态栏 -->
        <div class="status-bar">
            <div class="status-bar-left">
                <span>10:30</span>
            </div>
            <div class="status-bar-right">
                <i class="fas fa-signal mr-2"></i>
                <i class="fas fa-wifi mr-2"></i>
                <i class="fas fa-battery-full"></i>
            </div>
        </div>

        <!-- 页面内容 -->
        <div class="page-content">
            <!-- 顶部标题 -->
            <div class="flex justify-between items-center px-4 py-3 border-b border-gray-200">
                <h1 class="text-xl font-bold">学习中心</h1>
                <button><i class="fas fa-history text-gray-500"></i></button>
            </div>

            <!-- 学习数据 -->
            <div class="bg-white px-4 py-4">
                <div class="flex items-center justify-around text-center">
                    <div class="flex flex-col items-center">
                        <p class="text-2xl font-bold text-blue-500">23</p>
                        <p class="text-xs text-gray-500 mt-1">今日学习(分钟)</p>
                    </div>
                    <div class="h-10 border-l border-gray-200"></div>
                    <div class="flex flex-col items-center">
                        <p class="text-2xl font-bold text-blue-500">5</p>
                        <p class="text-xs text-gray-500 mt-1">已学课程</p>
                    </div>
                    <div class="h-10 border-l border-gray-200"></div>
                    <div class="flex flex-col items-center">
                        <p class="text-2xl font-bold text-blue-500">12</p>
                        <p class="text-xs text-gray-500 mt-1">学习天数</p>
                    </div>
                </div>
            </div>

            <!-- 学习计划 -->
            <div class="px-4 py-4">
                <div class="bg-blue-50 rounded-xl p-4">
                    <div class="flex justify-between items-start">
                        <div>
                            <h3 class="text-base font-semibold">今日学习计划</h3>
                            <p class="text-sm text-gray-500 mt-1">完成今日任务，获得学习勋章</p>
                        </div>
                        <div class="bg-blue-500 text-white text-xs px-2 py-1 rounded">
                            2/3
                        </div>
                    </div>
                    <div class="mt-4 space-y-3">
                        <div class="flex items-center">
                            <div class="w-5 h-5 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs mr-3">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="flex-1">
                                <p class="text-sm font-medium">完成《Python数据分析》第3章</p>
                            </div>
                        </div>
                        <div class="flex items-center">
                            <div class="w-5 h-5 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs mr-3">
                                <i class="fas fa-check"></i>
                            </div>
                            <div class="flex-1">
                                <p class="text-sm font-medium">完成每日练习题</p>
                            </div>
                        </div>
                        <div class="flex items-center opacity-60">
                            <div class="w-5 h-5 rounded-full bg-gray-300 flex items-center justify-center text-white text-xs mr-3">
                                <i class="fas fa-circle"></i>
                            </div>
                            <div class="flex-1">
                                <p class="text-sm font-medium">学习时长达到30分钟</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 标签栏 -->
            <div class="px-4 pt-2 pb-4 border-b border-gray-200">
                <div class="flex space-x-4">
                    <button class="px-4 py-2 bg-blue-500 text-white text-sm rounded-full">在学</button>
                    <button class="px-4 py-2 bg-gray-100 text-gray-500 text-sm rounded-full">收藏</button>
                    <button class="px-4 py-2 bg-gray-100 text-gray-500 text-sm rounded-full">已学完</button>
                </div>
            </div>

            <!-- 在学课程列表 -->
            <div class="px-4 py-4">
                <!-- 课程项1 -->
                <div class="flex items-center bg-white p-3 rounded-xl mb-4 shadow-sm">
                    <div class="w-20 h-20 bg-gray-100 rounded-lg overflow-hidden flex-shrink-0">
                        <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" alt="Python课程" class="w-full h-full object-cover">
                    </div>
                    <div class="ml-3 flex-1">
                        <h3 class="font-semibold text-base">Python数据分析实战</h3>
                        <div class="flex items-center mt-1">
                            <div class="w-full bg-gray-200 rounded-full h-1.5">
                                <div class="bg-blue-500 h-1.5 rounded-full" style="width: 45%"></div>
                            </div>
                            <span class="text-xs text-gray-500 ml-2">45%</span>
                        </div>
                        <div class="flex justify-between items-center mt-2">
                            <p class="text-xs text-gray-500">上次学习：第3章 数据处理</p>
                            <button class="bg-blue-500 text-white text-xs px-3 py-1 rounded-full">继续学习</button>
                        </div>
                    </div>
                </div>

                <!-- 课程项2 -->
                <div class="flex items-center bg-white p-3 rounded-xl mb-4 shadow-sm">
                    <div class="w-20 h-20 bg-gray-100 rounded-lg overflow-hidden flex-shrink-0">
                        <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" alt="领导力课程" class="w-full h-full object-cover">
                    </div>
                    <div class="ml-3 flex-1">
                        <h3 class="font-semibold text-base">现代企业领导力提升训练营</h3>
                        <div class="flex items-center mt-1">
                            <div class="w-full bg-gray-200 rounded-full h-1.5">
                                <div class="bg-blue-500 h-1.5 rounded-full" style="width: 20%"></div>
                            </div>
                            <span class="text-xs text-gray-500 ml-2">20%</span>
                        </div>
                        <div class="flex justify-between items-center mt-2">
                            <p class="text-xs text-gray-500">上次学习：第2章 沟通策略</p>
                            <button class="bg-blue-500 text-white text-xs px-3 py-1 rounded-full">继续学习</button>
                        </div>
                    </div>
                </div>

                <!-- 课程项3 -->
                <div class="flex items-center bg-white p-3 rounded-xl mb-4 shadow-sm">
                    <div class="w-20 h-20 bg-gray-100 rounded-lg overflow-hidden flex-shrink-0">
                        <img src="https://images.unsplash.com/photo-1579621970563-ebec7560ff3e?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" alt="理财课程" class="w-full h-full object-cover">
                    </div>
                    <div class="ml-3 flex-1">
                        <h3 class="font-semibold text-base">个人理财与投资</h3>
                        <div class="flex items-center mt-1">
                            <div class="w-full bg-gray-200 rounded-full h-1.5">
                                <div class="bg-blue-500 h-1.5 rounded-full" style="width: 65%"></div>
                            </div>
                            <span class="text-xs text-gray-500 ml-2">65%</span>
                        </div>
                        <div class="flex justify-between items-center mt-2">
                            <p class="text-xs text-gray-500">上次学习：第5章 资产配置</p>
                            <button class="bg-blue-500 text-white text-xs px-3 py-1 rounded-full">继续学习</button>
                        </div>
                    </div>
                </div>

                <!-- 课程项4 -->
                <div class="flex items-center bg-white p-3 rounded-xl mb-4 shadow-sm">
                    <div class="w-20 h-20 bg-gray-100 rounded-lg overflow-hidden flex-shrink-0">
                        <img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" alt="AI课程" class="w-full h-full object-cover">
                    </div>
                    <div class="ml-3 flex-1">
                        <h3 class="font-semibold text-base">人工智能基础入门</h3>
                        <div class="flex items-center mt-1">
                            <div class="w-full bg-gray-200 rounded-full h-1.5">
                                <div class="bg-blue-500 h-1.5 rounded-full" style="width: 10%"></div>
                            </div>
                            <span class="text-xs text-gray-500 ml-2">10%</span>
                        </div>
                        <div class="flex justify-between items-center mt-2">
                            <p class="text-xs text-gray-500">上次学习：第1章 AI概念</p>
                            <button class="bg-blue-500 text-white text-xs px-3 py-1 rounded-full">继续学习</button>
                        </div>
                    </div>
                </div>

                <!-- 课程项5 -->
                <div class="flex items-center bg-white p-3 rounded-xl shadow-sm">
                    <div class="w-20 h-20 bg-gray-100 rounded-lg overflow-hidden flex-shrink-0">
                        <img src="https://images.unsplash.com/photo-1580894742597-87bc8789db3d?ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" alt="演讲课程" class="w-full h-full object-cover">
                    </div>
                    <div class="ml-3 flex-1">
                        <h3 class="font-semibold text-base">专业演讲与公众表达</h3>
                        <div class="flex items-center mt-1">
                            <div class="w-full bg-gray-200 rounded-full h-1.5">
                                <div class="bg-blue-500 h-1.5 rounded-full" style="width: 33%"></div>
                            </div>
                            <span class="text-xs text-gray-500 ml-2">33%</span>
                        </div>
                        <div class="flex justify-between items-center mt-2">
                            <p class="text-xs text-gray-500">上次学习：第3章 演讲技巧</p>
                            <button class="bg-blue-500 text-white text-xs px-3 py-1 rounded-full">继续学习</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <div class="tab-bar">
            <div class="tab-bar-item">
                <i class="tab-icon fas fa-home"></i>
                <span>首页</span>
            </div>
            <div class="tab-bar-item">
                <i class="tab-icon fas fa-compass"></i>
                <span>发现</span>
            </div>
            <div class="tab-bar-item active">
                <i class="tab-icon fas fa-graduation-cap"></i>
                <span>学习</span>
            </div>
            <div class="tab-bar-item">
                <i class="tab-icon fas fa-crown"></i>
                <span>会员</span>
            </div>
            <div class="tab-bar-item">
                <i class="tab-icon fas fa-user"></i>
                <span>我的</span>
            </div>
        </div>
    </div>
</body>
</html> 